<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
// 引入封装接口
import { plantingHarvest } from "../request/api";
export default {
  mounted() {
    // 组件一加载执行初始化
    this.init();
    this.getData();
    // 页面一加载调用自适应函数
    this.screen();
    // 添加一个监听事件
    window.addEventListener("resize", this.screen);
  },
  destroyed() {
    window.addEventListener("resize", this.screen);
  },
  methods: {
    //封装一个初始化的函数 主要是数据图表的结构配置项
    init() {
      //1获取图表容器节点
      let chart = this.$refs.chart;

      //初始化 echarts
      let myChart = this.$echart.init(chart);
      this.info = myChart;
      // 初始化配置项
      let options = {
        // 标题
        title: {
          // 主标题内容
          text: "全国种植每月收成情况",
          // 改变主题标题的位置
          left: 20,
          top: 10,
        },
        //   x轴
        xAxis: {
          // 坐标轴类型  value数值轴，适用于连续数据
          type: "category",
        },
        //   y轴
        yAxis: {
          type: "value",
          axisLine: {
            //是否显示坐标轴轴线。
            //数据线
            show: true,
          },
          axisTick: {
            //是否显示坐标轴刻度。
            //刻度
            show: true,
          },
        },
        //  数据列
        series: [
          {
            type: "bar", //柱状图
            label: {
              //是否显示标签。
              show: true,
              position: "top",
            },
            //柱状图的宽度
            barWidth: 20,
            itemStyle: {
              opacity: 0.5,
              barBorderRadius: [50, 50, 0, 0], //柱状图圆角
              //每一个项的样式
              color: {
                //自定义颜色 在echarts中线性渐变有4个值，起： x,y,止 x2,y2
                type: "linear", //线性
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  //颜色起始
                  {
                    offset: 0,
                    color: "red",
                  },
                  {
                    offset: 1,
                    color: "green",
                  },
                ],
              },
            },
            emphasis: {
              //高亮 鼠标滑过柱状图 显示的样式
              itemStyle: {
                color: "pink",
                opacity: 1,
              },
            },
          },
        ],
      };
      //给echart 设置配置项内容
      myChart.setOption(options);
    },

    // 封装一个获取数据的方法
    async getData() {
      // 调用接口
      let result = await plantingHarvest();
      console.log(result, 11111);
      let yData = result.data.map((item) => item.month);
      let sData = result.data.map((item) => item.harvest);
      this.setEchart(yData, sData);
    },
    // 封装一个重新设置y轴和数据列的方法
    setEchart(yData, sData) {
      let options = {
        xAxis: {
          type: "category",
          data: yData,
        },
        series: [
          {
            type: "bar", //柱状图
            data: sData,
          },
        ],
      };

      this.info.setOption(options);
    },
    // 数据图表自适应
    screen() {
      // resize 专门做自适应
      // 自适应
      this.info.resize();
      let width = this.$refs.chart.offsetWidth;
      //自适应字体
      let num = (width / 100) * 5;
      //重置配置项的字体大小
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      this.info.setOption(options);
    },
  },
};
</script>

<style>
</style>